<!--战绩-->
<template>
  <div class="Recored">
    <div class="Recored_head">
      <van-icon name="arrow-left" @click="back" />
      <h3>卖方成交战绩</h3>
      <p>
        <van-icon name="ellipsis" />
        <van-icon name="award-o" />
      </p>
    </div>

    <div class="Recored_main">
      <div class="Recored_main_one">
        <p>北京</p>
        <div class="search">
          <input type="text" placeholder="请在这里输入区域/商圈" />
          <van-icon name="search" />
        </div>
        <router-link to="/home/renting">租房成交战绩</router-link>
      </div>

      <div class="Recored_main_two">
        <dl v-for="(item, index) in recoredlist" :key="index">
          <dt><img :src="item.img" alt="" /></dt>
          <dd>
            <p>{{ item.title }}</p>
            <p>
              <span>{{ item.sigPrice }}/</span><span>{{ item.roomeType }}</span>
            </p>
            <div class="Recored_main_two_one">
              <span>
                <p>{{ item.price }}</p>
                <p>{{ item.type }}</p>
              </span>
              <span>{{ item.roomSize }}</span>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      recoredlist: [],
    };
  },
  methods: {
    //返回上一页
    back() {
      history.go(-1);
    },

    Recored() {
      axios.get("/getSaleNum").then((res) => {
        console.log(res);
        this.recoredlist = res.data.data;
      });
    },
  },

  created() {
    this.Recored();
  },
};
</script>

<style>
.Recored {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.Recored_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background: #2693fa;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.Recored_head p {
  border: 1px solid #e6e6e6;
  border-radius: 40px;
}
.Recored_head p .van-icon {
  padding: 4px 10px;
}
.Recored_main {
  flex: 1;
  overflow-y: scroll;
}
.Recored_main_one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 5px 10px;
  background: #f8f6f6;
}
.search input {
  border: none;
  background: #f8f6f6;
}
.Recored_main_two {
  width: 100%;
}
.Recored_main_two dl {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-top: 10px;
}
.Recored_main_two dl dt {
  width: 30%;
  height: 100%;
}
.Recored_main_two dl dt img {
  width: 100%;
  height: 100%;
}
.Recored_main_two dl dd {
  width: 70%;
  padding-left: 5px;
}
.Recored_main_two dl dd p:nth-child(2) span:nth-child(2) {
  padding-left: 8px;
}
.Recored_main_two_one {
  display: flex;
}
.Recored_main_two_one span:nth-child(1) p:nth-child(1) {
  color: orange;
}
.Recored_main_two_one span:nth-child(1) p:nth-child(2) {
  background: #e6e6e6;
  margin-top: 10px;
  text-align: center;
}
.Recored_main_two_one span:nth-child(2) {
  padding: 5px;
  color: #ccc;
}
</style>